<template>
  <div class="expert">
    <!--列表-->
    <tmpHeader :index='4'/>
    <!--添加专家/搜索-->
    <div class="iheader" v-show="!flag">
      <Button type="info" @click="navto">
        <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>
      </Button>
      <div class="box">
        <div class="boxs">
          <Input v-model.trim="val" placeholder="请输入专家姓名查询" style="width: 200px" @on-keyup.enter="valChange" clearable/>
        </div>
        <Button type="primary"  icon="ios-search" @click="valChange" ></Button>
      </div>
    </div>
    <!--表格列表-->
    <div class="main" v-show="!flag">
      <Table stripe :columns="columnList" :data="tablesList"></Table>
    </div>
    <div class="page">
          <Page :total="expertSize" :current='pageNo' show-total show-elevator @on-change="pageChange" v-show="!flag"/>
      </div>
  </div>
</template>

<script>
// 专家介绍
import tmpHeader from "@/pages/organizat/contentmen/tmpHeader";
import api from "@/api/commonApi";
export default {
  components: {
    tmpHeader
  },
  data() {
    return {
      tablesList: [],
      id: sessionStorage.getItem("hospitalId"),
      expertSize: 10,
      val: "",
      pageNo: 1,
      pageSize: 10,
      flag: "",
      columnList: [
        {
          title:"排序",
          key:"sum",
          align:"center",
          render: (h, params) => {
              let sum = (this.pageNo-1)*this.pageSize + params.index +1;
              return h("span", sum);
          }
        },
        {
          title:"科室",
          key:"deptName",
          align:"center"
        },
        {
          title:"姓名",
          key:"name",
          align:"center"
        },
        {
          title:"职称",
          key:"titleName",
          align:"center"
        },
        {
          title:"严选专家标识",
          key:"iexpert",
          align:"center",
          render: (h,params) => {
            let row = params.row;
            let iexpert = row.iexpert ? "是" :"否"
            return h("div", [
                h(
                    "span",{},
                    iexpert
                )
            ]);
          }
        },
        {
          title:"显示标识",
          key:"display",
          align:"center"
        },
        {
          title:"显示排序",
          key:"sort",
          align:"center",
        },
        {
          title:"设置",
          align:"center",
          width: 200,
          render: (h,params) => {
            let row = params.row;
            let btn = null,separator = null;
            if(row.authStatus == 2){
                separator = " | ";
                btn =  h('span',{
                          style: {
                              color: " #5362e1",
                              width: "60px"
                        },
                        on: {
                            click: () => {
                                this.update(row.id
                                );
                            }
                        }
                    },
                    "更新缓存"
                );
            }
            return [
              h('span',{
                style: {
                    color: " #5362e1",
                    width: "60px"
                },
                on: {
                  click: () => {
                    this.edit(row)
                  }
                }
              },'编辑'),
              separator,
              btn
            ]
          }
        }
      ]
    };
  },
  created() {
    let pageNo = this.$route.params.pageNo;
    if (pageNo) {
      this.pageNo = parseInt(pageNo);
    }
    let breadList = [ 
      { path: "/index", title: "首页" },
      {
        path: "/index/operation/mechanism/index",
        title: "机构运营"
      },
      {
        path: "/index/operation/home",
        title: "机构配置管理"
      }
    ];
    this.$emit("changeBreadList", breadList);
    this.getExpertData(this.pageNo);
  },
  mounted() {
    this.status();
  },
  methods: {
    //更新缓存
    update(id){
        let params = {};
        params.id = id;
        this.$axios
            .post(api.updateDoctorCache, params)
            .then(resp => {
                if (resp.data.success) {
                    this.$Message.info("更新成功");
                } else {
                }
            })
            .catch(err => {
                // this.$Message.info("服务器超时，请重试");
            });
    },
    //分页器改变
    pageChange(index) {
      this.pageNo = index;
      if (this.val != "") {
        this.getExpertData(index, this.val);
      } else {
        this.getExpertData(index);
      }
    },
    status() {
      let flag = localStorage.getItem("status");
      if (!Boolean(flag)) {
        this.$Message.info("您还没有开通互联网医院,请先开通互联网医院");
        this.flag = true;
        localStorage.setItem("homeIndex", 0);
        setTimeout(() => {
          this.functionJS.paramsNavgationTo(this, "homeinfo", {
            // 公用方法
          }); 
        }, 1000);
      }
    },
    // 模糊查询
    valChange() {
      this.pageNo = 1
      this.getExpertData(1, this.val);
    },
    navto() {
      this.functionJS.paramsNavgationTo(this, "expertAdd", {
        // 公用方法
          pageNo: this.pageNo
      }); 
    },
    edit(item) {
      let id = item.id;
      this.functionJS.paramsNavgationTo(this, "expertEdit", {
        // 公用方法
          item,
          pageNo: this.pageNo
      }); 
    },
    getExpertData(pageNo, val) {
      let params = {
        hospitalId: this.id,
        pageNo,
        pageSize: 10,
        iexpert:1
      };
      if (Boolean(val)) {
        params.name = val.trim();
      }
      this.$axios
        .post(api.expertDoctorList, params)
        .then(res => {
          if (res.data.success) {
            let ret = res.data.object;
            this.tablesList = ret.records;
              this.expertSize = ret.total;
            if(ret.records && ret.records.length){
              ret.records.forEach((item,index) => {
                item.sum = this.addZeros(index);
                item.display = item.display ? '是' :'否'
                // item.iexpert = item.iexpert ? '是' :'否'
              })
            } else {
              this.tablesList = []
            }           
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style scoped lang="less">
.expert {
  width: calc(100% );
  padding: 10px 30px;
  margin: 0 auto;
  background: #fff;
  .iheader {
    width: 95%;
    margin: 20px auto;
    display: flex;
    .box {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 10px;
      .boxs{
        margin-right: 10px;
      }
      .btn {
        width: 100px;
        height: 30px;
        text-align: center;
        border: none;
        outline: none;
        background: #5362e1;
        color: #fff;
        border-radius: 4px;
        margin-left: 10px;
      }
    }
  }
  .main {
    width: 95%;
    margin: 0 auto;
  }
  .page{
      text-align: center;
      margin-top: 20px;
    }
}
</style>